<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>

    </head>
    <body>
        <h1>深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame</h1>
        <p>来源:<a href="https://www.cnblogs.com/xiaohuochai/p/5777186.html">https://www.cnblogs.com/xiaohuochai/p/5777186.html</a></p>
        <article>
            <p>使用</p>
            <p>requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行</p>
            <p>requestID = requestAnimationFrame(callback);</p>
            <p>//控制台输出1和0</p>
            <p>var timer = requestAnimationFrame(function(){</p>
            <p>console.log(0);</p>
            <p>});</p>
            <p>console.log(timer);//1</p>
            <p>cancelAnimationFrame方法用于取消定时器</p>
            <p>//控制台什么都不输出</p>
            <p>var timer = requestAnimationFrame(function(){</p>
            <p>console.log(0);</p>
            <p>});</p>
            <p>cancelAnimationFrame(timer);</p>
            <p>也可以直接使用返回值进行取消</p>
            <p>var timer = requestAnimationFrame(function(){</p>
            <p>console.log(0);</p>
            <p>});</p>
            <p>cancelAnimationFrame(1);</p>
            <p>兼容</p>
            <p>IE9-浏览器不支持该方法，可以使用setTimeout来兼容</p>
            <p>【简单兼容】</p>
            <p>if (!window.requestAnimationFrame) {</p>
            <p>requestAnimationFrame = function(fn) {</p>
            <p>setTimeout(fn, 17);</p>
            <p>};</p>
            <p>}</p>
            <p>【严格兼容】</p>
            <p>复制代码</p>
            <p>if(!window.requestAnimationFrame){</p>
            <p>var lastTime = 0;</p>
            <p>window.requestAnimationFrame = function(callback){</p>
            <p>var currTime = new Date().getTime();</p>
            <p>var timeToCall = Math.max(0,16.7-(currTime - lastTime));</p>
            <p>var id  = window.setTimeout(function(){</p>
            <p>callback(currTime + timeToCall);</p>
            <p>},timeToCall);</p>
            <p>lastTime = currTime + timeToCall;</p>
            <p>return id;</p>
            <p>}</p>
            <p>}</p>
            <p>复制代码</p>
            <p>if (!window.cancelAnimationFrame) {</p>
            <p>window.cancelAnimationFrame = function(id) {</p>
            <p>clearTimeout(id);</p>
            <p>};</p>
            <p>}</p>
        </article>
        <div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
        <button id="btn">run</button>
        <script>
        // 1.setInterval
        // var timer;
        // btn.onclick = function(){
        //     clearInterval(timer);
        //     myDiv.style.width = '0';
        //     timer = setInterval(function(){
        //         if(parseInt(myDiv.style.width) < 500){
        //             myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
        //             myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';    
        //         }else{
        //             clearInterval(timer);
        //         }        
        //     },16);
        // }
        // 2.setTimeout
        // var timer;
        // btn.onclick = function(){
        //     clearTimeout(timer);
        //     myDiv.style.width = '0';
        //     timer = setTimeout(function fn(){
        //         if(parseInt(myDiv.style.width) < 500){
        //             myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
        //             myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
        //             timer = setTimeout(fn,16);
        //         }else{
        //             clearTimeout(timer);
        //         }    
        //     },16);
        // }
        // 3.requestAnimationFrame
        var timer;
        btn.onclick = function(){
            myDiv.style.width = '0';
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(function fn(){
                if(parseInt(myDiv.style.width) < 500){
                    myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
                    myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
                    timer = requestAnimationFrame(fn);
                }else{
                    cancelAnimationFrame(timer);
                }    
            });
        }
        </script>
    </body>
</html>